<template>
  <horizontalList ref="anchor-list" list-name="anchor" :list="moduleData.content_list" :item-style="itemStyle">
    <template v-slot="{item, index, currentIndex}">
      <view v-show="index === currentIndex" style="top: 0; left: 0; right: 0; position: absolute;" :style="'opacity: '+ (index === currentIndex ? 1 : 0)">
        <image style="width: 100%;height: auto;display: block;" :src="item.pic_checked" mode="widthFix" @click="handleAnchorClick(item)" />
      </view>
      <image style="width: 100%;height: auto;display: block;" :style="'opacity: '+ (index !== currentIndex ? 1 : 0)" :src="item.pic_normal" mode="widthFix" @click="handleAnchorClick(item)" />
    </template>
  </horizontalList>
</template>
<script>
import horizontalList from '@/components/horizontalList/index'
export default {
  name: 'AnchorList',
  components: {
    horizontalList
  },
  props: {
    moduleData: {
      type: Object,
      default() {
        return {
          content_list: []
        }
      }
    },
    current: {
      type: String,
      default: ''
    }
  },
  computed: {
    itemStyle: function() {
      const lineNum = this.moduleData.content_list.length > 4 ? 4.5 : this.moduleData.content_list.length
      const str = `width: ${100 / lineNum}%; display: inline-block; position: relative;`
      return str
    }
  },
  watch: {
    current() {
      const index = this.moduleData.content_list.findIndex(i => i.connect_id === this.current)
      if (index > -1) {
        this.$refs['anchor-list'].setIndex(index)
      }
    }
  },
  methods: {
    handleAnchorClick(item) {
      this.$emit('itemClick', item)
    }
  }
}
</script>
